<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        *{
            height: 100%; //设置高度，不然会显示不出来
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KiLFtdyqQTTVZx7vIdUHXtjrZnj6G1RG"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <script>
        $(function(){
            navigator.geolocation.getCurrentPosition(translatePoint); //定位
        });
        function translatePoint(position){
            var currentLat = position.coords.latitude;
            var currentLon = position.coords.longitude;
            var gpsPoint = new BMap.Point(currentLon, currentLat);
            BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
        }
        function initMap(point){
//初始化地图
            map = new BMap.Map("map");
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.centerAndZoom(point, 8);
            map.enableScrollWheelZoom()
//            map.addOverlay(new BMap.Marker(point))



//          自定义大头针
            var icon1 = new BMap.Icon('start.png', new BMap.Size(26,37));//起点大头针
            var icon2 = new BMap.Icon('finish.png', new BMap.Size(26,37));//终点大头针

//            大头针定位
//            var point1 = new BMap.Point();
            var mkr1 = new BMap.Marker(point, {icon: icon1});   //起点定位
            var point2 = new BMap.Point(116.447804,39.913123);   //终点坐标
            var mkr2 = new BMap.Marker(point2,{icon:icon2});   //终点定位

//            折线
//            var polyline = new BMap.Polyline([mkr1,mkr2],{strokeColor:"blue",strokeWeight:6,strokeOpacity:0.5});

            map.addOverlay(mkr1);
            map.addOverlay(mkr2);

//            复制粘贴实验的

            mkr1.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画
            mkr2.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画
            var polyline = new BMap.Polyline([
                point,
//                new BMap.Point(116.401801,39.912114),
//                new BMap.Point(115.403803,39.912336),
//                new BMap.Point(114.404804,39.912447),
//                new BMap.Point(113.405905,39.918558),
//                new BMap.Point(112.418804,39.926123),
//                new BMap.Point(111.419184,39.929323),
//                new BMap.Point(110.423184,39.930323),
                point2,
            ],{strokeColor:"red", strokeWeight:3, strokeOpacity:0.5});

            map.addOverlay(polyline);
//        window.run = function (){
//            var driving = new BMap.DrivingRoute(map);    //驾车实例
//            driving.search(mkr1, mkr2);
//            driving.setSearchCompleteCallback(function(){
//                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
//                pts = [                          //创建7个点
//                    new BMap.Point(116.401801,39.912114),
//                    new BMap.Point(116.403803,39.912336),
//                    new BMap.Point(116.404804,39.912447),
//                    new BMap.Point(116.405905,39.918558),
//                    new BMap.Point(116.418804,39.926123),
//                    new BMap.Point(116.418904,39.926223),
//                    new BMap.Point(116.419184,39.929323),
//                    new BMap.Point(116.423184,39.930323)
//                ];
//
//
//                var paths = pts.length;    //获得有几个点
//
////alert(pts.toString());
//                var carMk = new BMap.Marker(pts[0],{icon:myIconmove});
//                map.addOverlay(carMk);
//                i=0;
//                function resetMkPoint(i){
//                    carMk.setPosition(pts[i]);
//                    if(i < paths){
//                        setTimeout(function(){
//                            i++;
//                            resetMkPoint(i);
//                        },500);
//                    }else{map.removeOverlay(carMk);}
//                }
//                setTimeout(function(){
//                    resetMkPoint(0);
//                },800)    });
//        }

//            画线
//            map.addOverlay(polyline)
        }
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>